<template>
    <div>
        <div style="color:#000;font-size:22px;padding: 0px 20px 10px 20px;">安全设置</div>
        <div class="item_wap">
            <div class="lt">
                <div class="pas">账号密码</div>
            </div>
            <div class="rg">
                 <span @click="$refs.pass.dialog = true">修改</span>
            </div>
        </div>

        <div class="item_wap">
            <div class="lt">
                <p>绑定手机</p>
                <dd>已绑定手机：<span v-if="mobile">{{mobile}}</span></dd>
            </div>
            <div class="rg">
                 <span @click="changePhone">暂不支持在此设置，请在基本资料修改</span>
            </div>
        </div>
        
        <updatePass ref="pass"/>

    </div>
</template>

<script>
import { courseReady, courseSave } from '@/api/request'
import updatePass from './updatePass'
import updatePhone from './updatePhone'
export default {
    components: { updatePass, updatePhone },
    props:['mobile'],
    data() {
        return{

        }
       
    },
    mounted(){
    //    this.init()
    },
   
    methods: {
        changePhone(){

        }
        
        
    },

}
</script>

<style scoped lang="scss">
.item_wap{
    height: 77px;
    padding: 14px 0;
    margin: 0 40px 0 24px;
    border-bottom: 1px solid #e8e8e8;
    .lt{
        float: left;
        .pas{
            color: rgba(0,0,0,.65);
            margin-top: 20px;
            font-size: 14px;
        }
        p{
            color: rgba(0,0,0,.65);
            margin-bottom: 4px;
            font-size: 14px;
            line-height: 22px;
        }
        dd{
            color: rgba(0,0,0,.45);
            font-size: 12px;
            line-height: 22px;
            margin:0
        }
    }
    .rg{
        float: right;
        line-height: 53px;
        font-size:14px;
        span{
            color: #2d8cf0;
            background: 0 0;
            text-decoration: none;
            outline: 0;
            cursor: pointer;
            transition: color .2s ease;
        }
    }
}
</style>
